<template>
  <div class="goodsmanage">
    <div class="goodsmanage_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <!-- <el-input
            style="width:250px;"
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            v-model="search"
          >
          </el-input> -->
          <div class="taber">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="全部商品" name="1"> </el-tab-pane>
              <el-tab-pane label="待审核商品" name="2"> </el-tab-pane>
              <el-tab-pane label="失效商品" name="3"> </el-tab-pane>
              <el-tab-pane label="在线商品" name="4"> </el-tab-pane>
            </el-tabs>
            <div class="search_box">
              <div>
                <!-- clearable -->
                <el-select
                  v-model="search_type"
                  placeholder="请选择搜索方式"
                  size="mini"
                  style="width:150px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div>
                <el-input
                  v-model="search"
                  size="mini"
                  @change="dosearch"
                  suffix-icon="el-icon-search"
                  placeholder="请输入搜索内容"
                />
              </div>
            </div>
          </div>
          <div>
            <div class="promotiontable">
              <div class="radiobtn" v-if="radioshow">
                <el-radio-group
                  border="false"
                  v-model="searchradio"
                  text-color="#7D9EF0"
                  fill="#F2F6FF"
                  size="mini"
                  @change="searchChange"
                >
                  <el-radio-button label="1">所有</el-radio-button>
                  <el-radio-button label="2">佣金变动</el-radio-button>
                  <el-radio-button label="3">到期结束</el-radio-button>
                  <el-radio-button label="4">系统下架</el-radio-button>
                  <el-radio-button label="5">主动下架</el-radio-button>
                </el-radio-group>
              </div>
              <div>
                <el-table
                  v-loading="loading"
                  :data="tableData"
                  style="width: 100%"
                  :cell-style="rowClass"
                  :header-cell-style="headClass"
                  ref="singleTable"
                  @current-change="handleCurrentChange"
                  highlight-current-row
                >
                  <!-- fixed -->
                  <el-table-column prop="date" label="发布时间及编码">
                    <template slot-scope="scope">
                      <div>
                        {{
                          scope.row.start_time
                            | formatTime("yyyy-MM-dd hh:mm:ss")
                        }}
                      </div>
                      <div>{{ scope.row.id }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="url" label="主图">
                    <template slot-scope="scope">
                      <a :href="scope.row.goods_url" target="_blank">
                        <el-image
                          style="width:100px;height:100px"
                          fit
                          :src="scope.row.goods_img"
                          lazy
                        >
                          <div slot="placeholder" class="image-slot">
                            <!-- 加载中<span class="dot">...</span> -->
                            <img
                              style="display:inline-block;width:100%;height:100%"
                              :src="require('@/assets/images/download.gif')"
                              alt=""
                              srcset=""
                            />
                          </div>
                        </el-image>
                      </a>
                    </template>
                  </el-table-column>
                  <el-table-column prop="title" label="短标题">
                    <template slot-scope="scope">
                      <a :href="scope.row.goods_url" target="_blank">
                        <div style="text-align:center">
                          {{ scope.row.goods_short_title }}
                        </div>
                      </a>
                      <div
                        style="width:100%;display:flex;justify-content: space-around;align-items: center;"
                      >
                        <span
                          style="border-right:1px solid #c3c3c3;padding:0 7px 0 0"
                        >
                          ￥ {{ parseInt(scope.row.goods_price) }}
                        </span>
                        <span
                          style="border-right:1px solid #c3c3c3;color:red;padding:0 7px 0 0"
                        >
                          ￥ {{ parseInt(scope.row.after_coupon_price) }}
                        </span>
                        <span style="color:#FABC70;">
                          {{ scope.row.commission_than }}%
                        </span>
                        <span
                          style="color:#FABC70;border:2px solid #FABC70;font-size:16px;padding:0 3px"
                          >定</span
                        >
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="copywriting" label="文案">
                    <template slot-scope="scope">
                      <div
                        style="height:136px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;"
                      >
                        {{ scope.row.copywriting }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="coupon" label="优惠卷">
                    <template slot-scope="scope">
                      <div style="margin-top: 3px;">
                        <a
                          style="display:inline-block;margin-top:6px;color:black"
                          :href="scope.row.coupon_url"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          <span
                            style="background:red;border-top-left-radius: 5px; border-bottom-left-radius: 5px;padding: 5px 9px;color:white;text-align:center"
                            >劵</span
                          ><span
                            style="border:1px solid red;padding: 4px 10px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;"
                          >
                            ￥ {{ scope.row.coupon_price }}</span
                          >
                        </a>
                      </div>
                      <a
                        style="display:inline-block;margin-top:6px;color:blue"
                        :href="scope.row.coupon_url"
                        target="_blank"
                        rel="noopener noreferrer"
                        >领取</a
                      >
                      <div>
                        <span style="color:#FA624A">{{
                          scope.row.coupon_collar_count
                        }}</span
                        >/{{ scope.row.coupon_num }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="time" label="起止时间">
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.start_time | formatTime("yyyy-MM-dd hh:mm:ss")
                      }}</span>
                      <br />至
                      <span>{{
                        scope.row.goods_end_time
                          | formatTime("yyyy-MM-dd hh:mm:ss")
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="goods_status" label="商品状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.goods_status === 1">
                        <el-tag type="success">正常</el-tag>
                      </span>
                      <span v-else-if="scope.row.goods_status === 2">
                        <el-tag type="warning">佣金变动</el-tag>
                      </span>
                      <span v-else-if="scope.row.goods_status === 3">
                        <el-tag type="info">到期结束</el-tag>
                      </span>
                      <span v-else-if="scope.row.goods_status === 4">
                        <el-tag type="danger">系统下架</el-tag>
                      </span>
                      <span v-else-if="scope.row.goods_status === 5">
                        <el-tag type="danger">主动下架</el-tag>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="examine_status" label="审核状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.examine_status === 1">
                        <el-tag type="info">待审核</el-tag>
                      </span>
                      <span v-else-if="scope.row.examine_status === 2">
                        <el-tag type="success">已审核</el-tag>
                      </span>
                      <span v-else-if="scope.row.examine_status === 3">
                        <el-tag type="warning">审核驳回</el-tag>
                        <div>驳回原因:{{ scope.row.msg }}</div>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="action" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        @click.native.prevent="
                          deleteRow(scope.$index, scope, tableData)
                        "
                        type="text"
                        size="small"
                      >
                        查看详情
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div style="width:100%;text-align:right">
                  <!-- 分页器 -->
                  <!-- @size-change="handleSizeChange" -->
                  <!-- background -->
                  <el-pagination
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    :pager-count="11"
                    layout="total, prev, pager, next, jumper"
                    :total="count"
                  >
                    <!-- :page-sizes="[100, 200, 300, 400]" -->
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// import { getUserGoods } from "@/api/local/userinfo";
import { getUserGoods } from "@/api/userinfo/userinfo";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    },
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          var str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  },
  name: "homepage",
  data() {
    return {
      goods_status: "",
      pagesize: 30,
      currentPage: 1,
      count: 0,
      radioshow: false,
      loading: false,
      activeName: "1",
      search: "",
      search_type: "1",
      searchradio: "1",
      tableData: [
        // {
        //   id: 15, // 商品id
        //   goods_url: require("@/assets/images/goodsimg.jpg"),
        //   goods_short_title: "女帽", //商品短标题
        //   commission_than: "10", //佣金比例
        //   start_time: "2020-05-02 15:26:20", //开始时间
        //   goods_end_time: "2020-05-09 15:26:20", //结束时间
        //   shop_deposit: "100.00", //店铺押金
        //   goods_activity: 1,
        //   goods_class_name: "女装", // 分类名称
        //   coupon_type: 1,
        //   coupon_price: "20", //优惠卷金额
        //   goods_status: "1", // 商品状态1=正常 2=佣金变动 3=到期结束 3= 系统下架 4=主动下架
        //   coupon_collar_count: 100, //优惠卷领取数量
        //   coupon_num: 10000, //优惠卷数量
        //   after_coupon_price: "40.00", // 卷后单价
        //   goods_img:
        //     "img.letuilm.com\\/2020\\/04\\/f3ccdd2020042809372664183.jpg", //商品图片
        //   goods_price: "30.00", //商品单价
        //   copywriting: "推广文案" // 推广文案
        // }
      ],
      options: [
        {
          value: "1",
          label: "根据商品ID查询"
        },
        {
          value: "2",
          label: "根据店铺名称查询"
        },
        {
          value: "3",
          label: "根据关键字查询"
        }
      ]
    };
  },

  computed: {},
  created() {
    this.getUserGoods(1, 15, 1, "");
  },
  mounted() {},
  methods: {
    dosearch() {
      console.log(this.search);
      this.getUserGoods(
        this.currentPage,
        15,
        this.activeName,
        this.goods_status,
        this.search_type,
        this.search
      );
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getUserGoods(
        this.currentPage,
        15,
        this.activeName,
        this.goods_status
      );
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS) * 1000)
        .toLocaleString()
        .replace(/:\d{1,2}$/, " ");
    },
    getUserGoods(page, pagesize, type, goods_status, search_type, search) {
      this.loading = true;
      if (type == 3) {
        goods_status = this.goods_status;
      } else {
        goods_status = "";
      }
      getUserGoods({
        page: page,
        pagesize: pagesize,
        type: type,
        goods_status: goods_status !== "" ? goods_status : undefined,
        search_type: search_type !== "" ? search_type : undefined,
        search: search !== "" ? search : undefined
      })
        .then(res => {
          this.loading = false;
          console.log("用户商品列表", res);
          this.count = res.data.count;
          this.tableData = res.data.data;
          for (var k = 0; k < this.tableData.length; k++) {
            this.tableData[k].start_time = parseInt(
              +res.data.data[k].start_time + "000"
            );
            this.tableData[k].goods_end_time = parseInt(
              +res.data.data[k].goods_end_time + "000"
            );
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 查看详情
    deleteRow(index, scope, rows) {
      console.log("index", index);
      console.log("scope", scope.row);
      console.log("rows", rows);
      // rows.splice(index, 1);
    },
    // radio选择
    searchChange(val) {
      this.goods_status = val;
      this.getUserGoods(1, 15, this.activeName, val);
      // console.log();
    },
    // 导航栏切换
    handleClick() {
      this.getUserGoods(1, 15, this.activeName, "");
      if (this.activeName == 3) {
        this.radioshow = true;
      } else {
        this.radioshow = false;
      }
      console.log("导航", this.activeName);
    }
  }
};
</script>

<style lang="less" scoped>
.goodsmanage {
  // width: 970px;
  box-sizing: border-box;
  .goodsmanage_main {
    .card_top {
      .taber {
        position: relative;
        .search_box {
          position: absolute;
          top: 0;
          right: 0;
          display: flex;
          justify-content: flex-end;
          align-items: flex-end;
        }
      }
    }
    .promotiontable::v-deep {
      .el-radio-button--mini .el-radio-button__inner {
        border: none !important;
        border-radius: 12px;
      }
      .radiobtn {
        padding: 10px 0;
      }
    }
  }
}
</style>
